<template>
	<div class="tombMain">
        <div class="title">建馆</div>
		<van-form 
			show-error
            scroll-to-error
			class="myform"
			@submit="onSubmit" 
			@failed="onFailed" 
		>
			<van-field 
				name="th_ex6" 
				required 
				label="头像1" 
				center 
                placeholder="头像1" 
				:rules="[{ required: true, message: '请上传头像1' }]"
			>
				<template #input>
					<van-uploader 
						v-model="dataArr.th_ex6" 
                        upload-text="头像1" 
						:before-delete="beforeDelete('th_ex6')"
						:before-read="beforeRead" 
						:after-read="afterRead('th_ex6')" 
						max-count="1" 
					/>
				</template>
			</van-field>
			<van-field 
				v-model="form.th_ex4" 
				required
                center
				name="th_ex4" 
				label="墓主姓名1" 
				placeholder="墓主姓名1" 
				:rules="[{ required: true, message: '请填写墓主姓名1' }]" 
			/>
            <van-field 
				name="th_ex7" 
				label="头像2" 
				center 
                placeholder="头像2" 
			>
                <template #input>
                    <van-uploader 
						v-model="dataArr.th_ex7" 
                        upload-text="头像2" 
						:before-delete="beforeDelete('th_ex7')"
						:before-read="beforeRead"  
						:after-read="afterRead('th_ex7')" 
						max-count="1" 
					/>
                </template>
            </van-field>
            <van-field 
				v-model="form.th_ex5" 
                center
				name="th_ex5" 
				label="墓主姓名2" 
				placeholder="请填写墓主姓名2"  
			/>
            <van-field 
				v-model="form.th_ex11" 
				name="th_ex11"
				required 
				center
				label="口令" 
				placeholder="请填写口令" 
				:rules="[{ required: true, message: '请填写口令' }]" 
                class="password"
			/>
			<van-field 
				v-model="form.th_ex19" 
				name="th_ex19" 
				required 
				center
				label="墓位编号" 
				placeholder="请输入墓位编号,例:3-10" 
				:rules="[{ required: true, message: '请填写墓位编号' }, { pattern: /^[A-Za-z0-9]+[-][0-9]+$/, message: '请填写正确的墓位编号' }]" 
			/>

			<van-button 
				type="primary" 
				block 
				native-type="submit" 
				style="width:80%;margin:10vw auto 0"
			>
				提交
			</van-button>
		</van-form>
	</div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
	import { showDialog, showFailToast, showLoadingToast, closeToast } from 'vant';

	import { compressImg } from '@/utils/utils'
	import { fileUploadBase64Api, createHallApi, checkSavaApi } from '@/apis';
    const router = useRouter()
	const form = ref({
        th_ex6: '',
		th_ex7: '',
		th_ex14: '否',
		th_ex2: 'N',
		th_ex11: '',
		th_ex19: '',
		th_ex4: '',
		th_ex5: '',
		th_ex3: '微信',
		th_company: '凤凰山微信公众号',
		gca_id_fa: '',
		gca_id_son: '',
    })
	const dataArr = reactive({
		th_ex6: [],
		th_ex7: [],
	})

	const onFailed = (value) => {
        showDialog({
            title: '提示',
            message: value.errors[0].message
        })
    }

	const beforeRead = (file) => {
        console.log(file)
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            showFailToast('请上传 jpg/png 格式图片');
            return false;
        }
        return true;
    }


	const onSubmit = async (values) => {
		try {
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			})
			let res = await checkSavaApi({
				gca_id: form.value.gca_id_son,
				gm_ex6: form.value.th_ex19,
				gcb_name: form.value.th_ex4,
			})
			if (res.code == 200) {

			} else {
				closeToast()
				showFailToast(res.msg)
				console.log(111)
				return
			}
		} catch(err) {
			closeToast()
			showFailToast('验证墓位失败,请稍后重试!')
			return
		}
		// 上面验证成功才能继续走
		console.log(666)
		createHallApi({
			// data:this.form,
			th_ex6: form.value.th_ex6,
			th_ex7: form.value.th_ex7,
			th_ex14: form.value.th_ex14,
			th_ex2: form.value.th_ex2,
			th_ex11: form.value.th_ex11,
			th_ex19: form.value.th_ex19,
			th_ex4: form.value.th_ex4,
			th_ex5: form.value.th_ex5,
			th_ex3: form.value.th_ex3,
			th_company: form.value.th_company,
		}).then(res=>{
			closeToast()
			if (res.code == 200) {
				showDialog({
					title: '提示',
					message: res.msg
				}).then(() => {
					router.push('/cloudSacrifice')
				});
			} else {
				showFailToast(res.msg)
			}
		}).catch(err=>{
			closeToast()
			showFailToast('建馆失败!')
		})

	}
	const beforeDelete = (val) => {
		return (file, detail) => {
            let arr = form.value[val].split(',')
            arr.splice(detail.index, 1)
            form.value[val] = arr.join(',')
            return true
        }
	}
	const afterRead = (imgField) => {
		return file => {
			console.log(imgField)
			file.status = 'uploading';
			file.message = '上传中...';
			let obj = new compressImg(file, afterRead2, imgField, file)
		}
	}
	const afterRead2 = (imgField, file, obj) => {
		fileUploadBase64Api({
			data: obj
		}).then(res => {
			// form.value[imgField] = res[0].url
			if (res.status == '+OK') {
				if (form.value[imgField]) {
					form.value[imgField] = form.value[imgField].concat(',', res[0].url)
				} else {
					form.value[imgField] = form.value[imgField].concat(res[0].url)
				}
				file.status = 'done';
				file.message = '上传成功';
			} else {
				file.status = 'failed';
				file.message = '上传失败';
			}
			console.log(file)
		}).catch(err => {
			file.status = 'failed';
			file.message = '上传失败';
		})
	}
</script>

<style lang="scss" scoped>
	.myform {
		padding: 10px 20px 0 20px;
	}
	.tombMain{
		background: url('@/assets/bg/bg7.png');
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
        overflow: scroll;
	}
	.title{
		text-align: center;
		font-size: 20pt;
		padding: 5vw;
	}
	.wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
	:deep(.password .van-field__control) {
        -webkit-text-security:disc;
        text-security:disc;
    }
</style>
